<template>
  <div class="List">
    <div class="listInfo">
        <h3>猜你喜欢</h3>
        <div class="listInfo1">
            <span v-for="(item,index) in sortList" :key="index"  @click="sort(index)">{{item}}</span>
        </div>
        <div class="listInfo2">
            <span v-for="(item,index) in titleList" :key="index">{{item}}</span>
        </div>
        <div class="goods" v-for="(item,index) in shopList" :key="index">
            <div class="imgBox">
                <img :src="item.picUrl" alt="">
            </div>
            <div class="goodsInfo">
                <div class="name">{{item.name}}</div>
                <div class="score">
                    <span>{{item.wmPoiScore}}</span>&nbsp;&nbsp;
                    <span>{{item.monthSalesTip}}</span>
                </div>
                <div class="price">
                    <span>{{item.minPriceTip}}</span>&nbsp;&nbsp;
                    <span>{{item.shippingFeeTip}}</span>
                    <span>{{item.distance}}</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    currentIndex:0,
    dis:0,
    // 通过props接收从子组件传来的值，该值是只读的，不能修改
    props:['sortList','shopList','titleList'],
    methods:{
        sort(index){
            if(index == 1){
                this.shopList.sort((a,b)=>{
                    return a.distance - b.distance
                })
            }else if(index == 2){
                this.shopList.sort((a,b)=>{
                    return b.sale - a.sale
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.List{
    margin-bottom: 60px;
}
.listInfo{
    margin: 10px;
}
.listInfo>.listInfo1{
    margin: 16px 0px;
    display: flex;
    justify-content: space-between;
}
.listInfo>.listInfo2{
    display: flex;
    justify-content: space-between;
}
.listInfo>.listInfo2>span{
    display: inline-block;
    padding: 6px 6px;
    background-color: #b0b0b0;
    font-size: 14px;
    border-radius: 4px;
}
.listInfo>.goods{
    display: flex;
    justify-content: space-between;
    margin: 20px 0px;
}
.listInfo>.goods>.imgBox{
    width: 30%;
    margin-right: 10px;
    overflow: hidden;
}
.listInfo>.goods>.imgBox>img{
    width: 100%;
    border-radius: 4px;
}
.listInfo>.goods>.goodsInfo{
    width: 66%;
}
.listInfo>.goods>.goodsInfo>.name{
    font-weight: bold;
}
.listInfo>.goods>.goodsInfo>.score{
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 6px;
}
.listInfo>.goods>.goodsInfo>.price{
    font-size: 14px;
}
.listInfo>.goods>.goodsInfo>.price>span:nth-child(3){
    margin-left: 40px;
}
</style>